<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>

        <ion-title>
            <h1>{{ 'core.login.login' | translate }}</h1>
        </ion-title>

        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
                <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
            </ion-button>
            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding limited-width">
    <core-loading [hideUntil]="pageLoaded">
        @if (!siteCheckError && site && credForm) {

            <div class="ion-text-wrap ion-text-center core-login-info-box">
                <div class="core-login-site">
                    <core-site-logo siteNameMode="h2" [site]="site" />
                    @if (displaySiteUrl) {
                        <p class="core-siteurl">{{site.siteUrl}}</p>
                    }
                </div>

                @if (exceededAttemptsHTML && supportConfig && loginAttempts >= 3) {
                    <core-login-exceeded-attempts [supportConfig]="supportConfig"
                        [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
                        <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
                    </core-login-exceeded-attempts>
                }
            </div>

            <div class="core-login-methods">
                @if (showLoginForm && !isBrowserSSO) {
                    <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
                        <ion-item class="ion-margin-bottom" lines="inset">
                            <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
                                formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username"
                                enterkeyhint="next" required="true" [attr.aria-label]="'core.login.username' | translate " />
                        </ion-item>
                        <ion-item class="ion-margin-bottom" lines="inset">
                            <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
                                formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
                                required="true" [attr.aria-label]="'core.login.password' | translate ">
                                <ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" />
                            </ion-input>
                        </ion-item>
                        <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
                            class="ion-margin core-login-login-button ion-text-wrap">
                            {{ 'core.login.loginbutton' | translate }}
                        </ion-button>
                        <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
                        <input type="submit" class="core-submit-hidden-enter" />

                        <!-- Forgotten password option. -->
                        @if (showForgottenPassword) {
                            <ion-button expand="block" fill="clear" class="core-login-forgotten-password core-button-as-link ion-text-wrap"
                                (click)="forgottenPassword()">
                                {{ 'core.login.forgotaccount' | translate }}
                            </ion-button>
                        }
                    </form>
                }@else if (isBrowserSSO) {

                    <ion-button expand="block" (click)="openBrowserSSO()"
                        class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
                        {{ 'core.login.loginbutton' | translate }}
                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                    </ion-button>
                    <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>

                }


                @if (siteConfig) {
                    <core-login-methods [siteConfig]="siteConfig" [siteUrl]="site.siteUrl" [showLoginForm]="showLoginForm" />
                }
            </div>

            @if (!isBrowserSSO && (canSignup || authInstructions)) {
                <div class="core-login-sign-up">
                    <h2>{{ 'core.login.firsttime' | translate }}</h2>

                    <ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
                        <ion-label>
                            @if (authInstructions) {
                                <core-format-text [text]="authInstructions" [filter]="false" />
                            }
                        </ion-label>
                    </ion-item>

                    @if (canSignup) {
                        <ion-button expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
                            {{ 'core.login.startsignup' | translate }}
                        </ion-button>
                    }
                </div>
            }

        }

        @if (siteCheckError) {
            <core-empty-box icon="fas-circle-exclamation">
                <div [innerHTML]="siteCheckError"></div>
                <ion-button expand="block" (click)="checkSite()" fill="outline">
                    {{ 'core.tryagain' | translate }}
                </ion-button>
            </core-empty-box>
        }

    </core-loading>
</ion-content>
